<!-- 购物卡结佣管理-购物卡发货-新建发货单和发货确认-->
<template>
    <div class="shoppingCardSendNew">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/shoppingCardSend' }">购物卡发货</el-breadcrumb-item>
            <el-breadcrumb-item>新建发货单</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="stepIndex === 0">
            <el-form>
                <el-form-item label="所属楼盘：">{{devName}}</el-form-item>
            </el-form>
            <el-form :inline="true" :model="searchParams">
                <el-form-item label="卡号：">
                    <el-input v-model="searchParams.cardCode" placeholder="请输入发货单单号"></el-input>
                </el-form-item>
                <el-form-item label="结佣时间：">
                    <el-date-picker
                            v-model="searchParams.time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
                    <el-button @click="onClear">重置</el-button>
                </el-form-item>
            </el-form>
            <el-alert :title="'已选择 '+ multipleSelection.length +' 张购物卡,金额合计为 ' + totalAmount +' 元'" show-icon type="info" :closable="false"></el-alert>
            <el-table :data="tableData" @sort-change="sortChange1" ref="multipleTable" @select="select" @select-all="selectAll" border style="width: 100%">
                <el-table-column align="center" type="selection"  width="50"></el-table-column>
                <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                <el-table-column align="center" prop="devName" label="所属楼盘"></el-table-column>
                <el-table-column align="center" prop="brokerName" label="经纪人"></el-table-column>
                <el-table-column align="center" prop="brokerPhone" label="经纪人手机号"></el-table-column>
                <el-table-column align="center" prop="companyName" label="所属公司"></el-table-column>
                <el-table-column align="center" prop="typeName" label="购物卡类别"></el-table-column>
                <el-table-column align="center" prop="cardCode" label="卡号"></el-table-column>
                <el-table-column align="center" prop="cardDenomination" label="面额">
                    <template slot-scope="scope">￥{{scope.row.cardDenomination | formatMoney}}</template>
                </el-table-column>
                <el-table-column align="center" prop="orderId" label="订单号"></el-table-column>
                <el-table-column align="center" prop="sourceCategory" label="来源类别">
                    <template slot-scope="scope">{{['经纪人佣金','经纪人奖励','项目推荐奖'][scope.row.sourceCategory]}}</template>
                </el-table-column>
                <el-table-column align="center" prop="outStoreDate" sortable="custom" label="结佣时间"></el-table-column>
            </el-table>
            <div class="pagebar">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next"
                        :current-page.sync="tableConfig1.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableConfig1.pageSize"
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :total="tableConfig1.totalSize">
                </el-pagination>
            </div>
            <div class="mt20">
                <el-button @click="goSendList">取消</el-button>
                <el-button type="primary" @click="stepChange(1)">下一步</el-button>
            </div>
        </div>
        <div v-else>
            <el-form size="small" :model="shoppingCardForm" ref="shoppingCardForm" :rules="shoppingCardFormRules">
                <el-form-item label="所属楼盘：" label-width="110px">{{devName}}</el-form-item>
                <el-form-item label="购物卡：" label-width="110px">
                    数量: {{multipleSelection.length}}张
                    <span class="ml30 mr30"></span>
                    金额合计:￥{{totalAmount}}
                </el-form-item>
                <el-form-item label="项目收货人：" prop="projectConsignee" label-width="110px">
                    <el-input v-model="shoppingCardForm.projectConsignee" auto-complete="off" placeholder="请输入收货人姓名" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="发货时间：" prop="deliveryTime" label-width="110px">
                    <el-date-picker
                            v-model="shoppingCardForm.deliveryTime"
                            type="date"
                            placeholder="请选择发货时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="物流单号：" prop="logisticsNo" label-width="110px">
                    <el-input v-model="shoppingCardForm.logisticsNo" auto-complete="off" placeholder="请输入物流单号" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="物流公司：" prop="logisticsCompany" label-width="110px">
                    <el-input v-model="shoppingCardForm.logisticsCompany" auto-complete="off" placeholder="请输入物流公司名称" class="w-320"></el-input>
                </el-form-item>
                <el-form-item label="来源类别：" label-width="110px">
                    经纪人奖励
                </el-form-item>
            </el-form>

            <div class="mb10">购物卡发放明细：</div>
            <el-table :data="tableData2" border @sort-change="sortChange1" style="width: 100%">
                <el-table-column align="center" type="index" :key="Math.random()" label="序号" width="50"></el-table-column>
                <el-table-column align="center" prop="devName" label="所属楼盘"></el-table-column>
                <el-table-column align="center" prop="brokerName" label="经纪人"></el-table-column>
                <el-table-column align="center" prop="brokerPhone" label="经纪人手机号"></el-table-column>
                <el-table-column align="center" prop="companyName" label="所属公司"></el-table-column>
                <el-table-column align="center" prop="typeName" label="购物卡类别"></el-table-column>
                <el-table-column align="center" prop="cardCode" label="卡号"></el-table-column>
                <el-table-column align="center" prop="cardDenomination" label="面额">
                    <template slot-scope="scope">￥{{scope.row.cardDenomination | formatMoney}}</template>
                </el-table-column>
                <el-table-column align="center" prop="orderId" label="订单号"></el-table-column>
                <el-table-column align="center" prop="sourceCategory" label="来源类别">
                    <template slot-scope="scope">{{['经纪人佣金','经纪人奖励','项目推荐奖'][scope.row.sourceCategory]}}</template>
                </el-table-column>
                <el-table-column align="center" prop="outStoreDate" sortable="custom" label="结佣时间"></el-table-column>
            </el-table>
            <div class="pagebar">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next"
                        :current-page.sync="tableConfig2.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableConfig2.pageSize"
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :total="tableConfig2.totalSize">
                </el-pagination>
            </div>
            <div class="mt20">
                <el-button plain @click="stepChange(0)">上一步</el-button>
                <el-button type="primary" @click="save">发货确认</el-button>
                <el-button @click="goSendList">关闭</el-button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import utils from "@/common/utils.js";


    export default {
        name: 'shoppingCardSendNew',
        data() {
            return {
                searchParams: {
                    cardCode: '',
                    time: ["", ""],
                    sortFlag: ""
                },
                tableData: [],
                tableData2: [],
                tableConfig1: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                tableConfig2: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                multipleSelection: [],
                stepIndex: 0,
                devId: 0,
                devName: "",
                selectMap: {},
                totalAmount: 0,
                shoppingCardForm: {
                    projectConsignee: "",
                    deliveryTime: "",
                    logisticsNo: "",
                    logisticsCompany: "",
                },
                shoppingCardFormRules: {
                    projectConsignee: [
                        {required: true, message: '请输入收货人姓名', trigger: 'blur'},
                    ],
                    deliveryTime: [
                        {required: true, message: '请选择发货时间', trigger: 'blur'},
                    ],
                    logisticsNo: [
                        {required: true, message: '请输入物流单号', trigger: 'blur'},
                    ],
                    logisticsCompany: [
                        {required: true, message: '请输入物流公司名称', trigger: 'blur'},
                    ]
                },
            }
        },
        created() {
            this.devId = this.$route.query.devId;
            this.devName = this.$route.query.devName;
            this.getTableList()

        },
        mounted() {

        },
        methods: {
            onSearch() {
                this.tableConfig1.pageNum = 1;
                this.getTableList()
            },
            onClear() {
                this.searchParams = {
                    cardCode: '',
                    time: ["", ""],
                    sortFlag: ""
                }
            },
            select(arr, val) {
                if (this.selectMap[val.id]) {
                    delete this.selectMap[val.id]
                } else {
                    this.selectMap[val.id] = val;
                }
                this.calcMultipleSelection()
            },
            selectAll(arr) {
                if (arr.length) {
                    arr.forEach((item) => {
                        this.selectMap[item.id] = item;
                    })
                } else {
                    this.tableData.forEach((item) => {
                        delete this.selectMap[item.id]
                    })
                }
                this.calcMultipleSelection()
            },
            calcMultipleSelection() {
                let multipleSelection = [];
                let totalAmount = 0;
                for (let key in this.selectMap) {
                    multipleSelection.push(this.selectMap[key]);
                    totalAmount += +this.selectMap[key].cardDenomination
                }
                this.totalAmount = totalAmount.toFixed(2);
                this.multipleSelection = multipleSelection;
            },
            toggleSelection(rows) {
                setTimeout(() => {
                    rows.forEach((row) => {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    })
                }, 30)
            },
            getTableList() {
                this.axios.post(api.deliveryOrderGetShopCardList, {
                    devId: this.devId,
                    cardCode: this.searchParams.cardCode,
                    startTime: this.searchParams.time[0],
                    endTime: this.searchParams.time[1],
                    sortFlag: this.searchParams.sortFlag,
                    pageNum: this.tableConfig1.pageNum,
                    pageSize: this.tableConfig1.pageSize
                }).then((res) => {
                    console.log(res);
                    this.tableData = res.data.data.data.list;
                    this.tableConfig1.totalSize = res.data.data.data.total;
                    let rows = [];
                    this.tableData.forEach((item, index) => {
                        if (this.selectMap[item.id]) {
                            rows.push(item)
                        }
                    });
                    this.toggleSelection(rows)
                });
            },
            goSendList() {
                this.$router.push({path: "./shoppingCardSend"})
            },
            stepChange(index) {
                let tempArr = [];
                if (index === 1) {
                    if (this.multipleSelection.length) {
                        this.handleCurrentChange2(1)
                    } else {
                        this.$message({
                            message: '请至少选择一张购物卡！',
                            type: 'warning'
                        });
                        return false;
                    }
                } else {
                    this.handleCurrentChange1(this.tableConfig1.pageNum)
                }
                this.stepIndex = index;
            },
            save() {
                let shopCardList = []
                this.multipleSelection.forEach(item => {
                    shopCardList.push({
                        shopCardId: item.id,
                        orderId: item.orderId
                    })
                });
                this.$refs["shoppingCardForm"].validate((valid) => {
                    if (valid) {
                        this.axios.post(api.deliveryOrderCreateDeliveryOrder, {
                            devId: this.devId,
                            cardCount: this.multipleSelection.length,
                            totalAmount: this.totalAmount,
                            projectConsignee: this.shoppingCardForm.projectConsignee,
                            deliveryTime: +this.shoppingCardForm.deliveryTime,
                            logisticsNo: this.shoppingCardForm.logisticsNo,
                            logisticsCompany: this.shoppingCardForm.logisticsCompany,
                            sourceCategories: 1,
                            shopCardList: shopCardList
                        }).then((res) => {
                            if (res.data.code) {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                                this.goSendList()
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleSizeChange1(size) {
                this.tableConfig1.pageSize = size
                this.getTableList()
            },
            handleCurrentChange1(page) {
                this.tableConfig1.pageNum = page
                this.getTableList()
            },
            handleSizeChange2(size) {
                this.tableConfig2.pageSize = size
                this.tableConfig2.pageNum = 1
                this.tableData2 = this.multipleSelection.slice((this.tableConfig2.pageNum - 1) * this.tableConfig2.pageSize, this.tableConfig2.pageNum * this.tableConfig2.pageSize);
            },
            handleCurrentChange2(page) {
                this.tableConfig2.totalSize = this.multipleSelection.length;
                this.tableConfig2.pageNum = page
                this.tableData2 = this.multipleSelection.slice((this.tableConfig2.pageNum - 1) * this.tableConfig2.pageSize, this.tableConfig2.pageNum * this.tableConfig2.pageSize);
            },
            sortChange1(info) {
                if (info.order === 'descending') {
                    this.searchParams.sortFlag = 1
                } else if (info.order === "ascending") {
                    this.searchParams.sortFlag = 2
                } else {
                    this.searchParams.sortFlag = ""
                }
                this.getTableList()
            },
        },
        filters: {
            formatMoney(money) {
                return utils.formatMoney(money)
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .shoppingCardSendNew {
        .el-alert {
            background: rgba(230, 243, 252, 1);
        }
        .el-table {
            width: 99.9%;
        }
    }
</style>
